<template>
	<view class="param-content">
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check1')">
				<checkbox :value="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>快充</text>
			<switch color="#51b7b9" @change="switchChange($event,'06010014')" :checked="boxForm['06010014']"
				style="transform:scale(0.7)" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check2')">
				<checkbox :value="checkList.check2" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>备电</text>
			<switch color="#51b7b9" :checked="boxForm['06010015']" @change="switchChange($event,'06010015')"
				style="transform:scale(0.7)" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check3')">
				<checkbox :value="checkList.check3" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>整流单元休眠</text>
			<switch color="#51b7b9" :checked="boxForm['06010023']" @change="switchChange($event,'06010023')"
				style="transform:scale(0.7)" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check4')">
				<checkbox :value="checkList.check4" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>电子锁反馈类型</text>
			<uni-data-select class="sliders" placeholder="请选择电子锁反馈类型" v-model="boxForm['06010007']"
				:localdata="getLockOption"></uni-data-select>
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check5')">
				<checkbox :value="checkList.check5" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>门轴</text>
			<uni-data-select class="sliders" style="width: 50%;" placeholder="请选择门轴"
				:disabled="!boxForm['06010008'] || isShow" v-model="boxForm['06010009']" :localdata="getLockOption">
			</uni-data-select>
			<switch color="#51b7b9" :checked="boxForm['06010008']" @change="switchChange($event,'06010008')"
				style="transform:scale(0.7)" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check6')">
				<checkbox :value="checkList.check6" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>电池在位模式</text>
			<uni-data-select class="sliders" placeholder="请选择电池在位模式" v-model="boxForm['06010011']"
				:localdata="batteryIsOn"></uni-data-select>
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check7')">
				<checkbox :value="checkList.check7" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>灭火器反馈类型</text>
			<uni-data-select class="sliders" placeholder="请选择灭火器反馈类型" v-model="boxForm['06010022']"
				:localdata="getLockOption"></uni-data-select>
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check8')">
				<checkbox :value="checkList.check8" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>消防模式</text>
			<uni-data-select class="sliders" placeholder="请选择消防模式" v-model="boxForm['06010024']"
				:localdata="getLockOption"></uni-data-select>
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check9')">
				<checkbox :value="checkList.check9" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>系统启动散热温度</text>
			<input v-model="boxForm['06010016']" class="uni-input" type="digit" placeholder="请输入系统启动散热温度" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check10')">
				<checkbox :value="checkList.check10" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>系统停止散热温度</text>
			<input v-model="boxForm['06010017']" class="uni-input" type="digit" placeholder="请输入系统停止散热温度" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check11')">
				<checkbox :value="checkList.check11" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>启动整柜加热温度</text>
			<input v-model="boxForm['06010018']" class="uni-input" type="digit" placeholder="请输入启动整柜加热温度" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check12')">
				<checkbox :value="checkList.check12" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>停止整柜加热温度</text>
			<input v-model="boxForm['06010019']" class="uni-input" type="digit" placeholder="请输入停止整柜加热温度" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check13')">
				<checkbox :value="checkList.check13" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>启动单仓加热温度</text>
			<input v-model="boxForm['06010020']" class="uni-input" type="digit" placeholder="请输入启动单仓加热温度" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check14')">
				<checkbox :value="checkList.check14" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>停止单仓加热温度</text>
			<input v-model="boxForm['06010021']" class="uni-input" type="digit" placeholder="请输入停止单仓加热温度" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check15')">
				<checkbox :value="checkList.check15" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>满电阈值</text>
			<input v-model="boxForm['06010031']" class="uni-input" type="digit" placeholder="请输入满电阈值" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check16')">
				<checkbox :value="checkList.check16" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>设备SN码</text>
			<input v-model="boxForm['06010025']" class="uni-input" placeholder="请输入设备SN码" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check17')">
				<checkbox :value="checkList.check17" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>有序充电</text>
			<input v-model="boxForm['06010027']" class="uni-input" placeholder="请输入有序充电" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check18')">
				<checkbox :value="checkList.check18" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>电池容量区分</text>
			<input v-model="boxForm['06010028']" class="uni-input" placeholder="请输入电池容量区分" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check19')">
				<checkbox :value="checkList.check19" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>邮政密码</text>
			<input v-model="boxForm['06010029']"  @input="onPasswordInput('06010029')" class="uni-input" placeholder="请输入邮政密码" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check20')">
				<checkbox :value="checkList.check20" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>管理员密码</text>
			<input v-model="boxForm['06010030']"  @input="onPasswordInput('06010030')" class="uni-input" placeholder="请输入管理员密码" />
		</view>
		<view class="param-one">
			<checkbox-group @change="checkboxChange($event,'check21')">
				<checkbox :value="checkList.check21" color="#51b7b9" style="transform:scale(0.7)" />
			</checkbox-group>
			<text>喇叭音量设置</text>
			<slider class="sliders" :value="boxForm['06010032']" @change="sliderChange" min="0" max="100" show-value />
		</view>
		<view class="search_btns">
			<button type="primary" size="mini" @click="isSetting">批量设置</button>
		</view>
	</view>
</template>

<script>
	import {
		getLockOption,
		batteryIsOn
	} from "@/common/config.js";
	import {
		equipment
	} from "@/api/my.js";
	export default {
		props: {
			tableData: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				getLockOption: getLockOption,
				batteryIsOn: batteryIsOn,

				boxForm: {
					"06010014": 0,
					"06010015": 0,
					"06010023": 0,
					"06010007": undefined,
					"06010009": undefined,
					"06010011": undefined,
					"06010022": undefined,
					"06010024": undefined,
					"06010016": undefined,
					"06010017": undefined,
					"06010018": undefined,
					"06010019": undefined,
					"06010020": undefined,
					"06010021": undefined,
					"06010031": undefined,
					"06010025": undefined,
					"06010027": undefined,
					"06010028": undefined,
					"06010029": undefined,
					"06010030": undefined,
					"06010032": 0,
					"06010008": 0,
				},
				checkList: {
					check1: false,
					check2: false,
					check3: false,
					check4: false,
					check5: false,
					check6: false,
					check7: false,
					check8: false,
					check9: false,
					check10: false,
					check11: false,
					check12: false,
					check13: false,
					check14: false,
					check15: false,
					check16: false,
					check17: false,
					check18: false,
					check19: false,
					check20: false,
					check21: false,
				},
				equipIds: [], //所选设备ids
				checkedParam: {}, //选中的参数信息
				equipList: [], //设备list
			}
		},
		watch: {
			tableData: {
				handler(val) {
					this.equipList = val;
				},
				immediate: true,
				deep: true
			},

		},
		methods: {
			switchChange(e, key) {
				let value = e.detail.value;
				this.boxForm[key] = value ? "1" : "0";
			},
			checkboxChange(e, key) {
				let value = e.detail.value;
				let check = value.length > 0 ? true : false;
				this.$set(this.checkList, key, check);
			},
			sliderChange(e) {
				let value = e.detail.value;
				this.$set(this.boxForm, '06010032', value);
			},
			onPasswordInput(type){
				setTimeout(() => {
					this.boxForm[type] = this.boxForm[type].replace(/\s+/g, '');
					this.boxForm[type] = this.boxForm[type].replace(/[\u4E00-\u9FA5]/g,'')
				}, 10)
			},
			isSetting() {
				let that = this;
				let isChecked = {};
				Object.values(this.checkList).map((item, index) => {
					Object.keys(this.boxForm).filter((pp, inx) => {
						if (item && index == inx) {
							isChecked[pp] = this.boxForm[pp];
						}
					});
				});
				this.checkedParam = isChecked;
				this.equipIds = this.equipList.filter(item => item.checked).map(p => {
					return p.id
				});
				if (this.checkList.check5) {
					isChecked['06010008'] = this.boxForm['06010008'];
				}
				if (this.equipList.length == 0) {
					this.$Toast.none('暂无设备，请先搜索~');
					return;
				} else if (this.equipIds.length == 0) {
					this.$Toast.none('请选择需要设置的设备');
					return;
				} 
				else if (Object.keys(isChecked).length == 0) {
					this.$Toast.none("请勾选需要设置的参数！");
					return;
				} else if (
					!Object.values(isChecked).every((item) => item || item == "0")
				) {
					this.$Toast.none("请设置已勾选的参数值！");
					return;
				}else {
					uni.showModal({
						title: '提示',
						content: '确认要批量设置参数信息吗？',
						success(res) {
							if (res.confirm) {
								that.dividerGroup();
							}
						}
					})
				}
			},

			dividerGroup() {
				let that = this;
				let arr = this.equipIds;
				let arrr = [];
				let result = arr.reduce(function(pre, item, index, arr) {
					let begin = index * 5;
					let end = begin + 5;
					let res = arr.slice(begin, end);
					if (res.length != 0) {
						arrr[index] = res;
					}
					return arrr;
				}, []);

				this.$Toast.loading('设置中~');
				// 5个一组,每次下发5个
				(function(arr) {
					let i = 0,
						length = result.length;
					(function a() {
						let timer = setTimeout(function() {
							let lng = i == length - 1 ? true : false;
							that.doSetting(result[i++], lng);
							i < length && a();
						}, 300);
					}())
				}(result));
			},
			// 设置参数
			doSetting(arr, isLast) {
				let datas = [];
				for (const key in this.checkedParam) {
					datas.push({
						id: key,
						value: this.checkedParam[key]
					});
				}
				let params = {
					entitys: datas,
				};
				// isLast 是否最后一组
				for (let i = 0; i < arr.length; i++) {
					params.equipId = arr[i];
					equipment("/operate/param/write", "post", params)
						.then((res) => {
							let inx = this.equipList.findIndex(item => item.id == arr[i]);
							this.$set(this.equipList[inx], 'resultCode', res.code);
							this.$set(this.equipList[inx], 'resultMessage', res.message);
							this.$emit('paramResult', this.equipList)
						})
						.finally((fina) => {
							if (isLast && i == arr.length - 1) {
								uni.hideLoading();
							}
						}).catch(err => {
							let inx = this.equipList.findIndex(item => item.id == arr[i]);
							this.$set(this.equipList[inx], 'resultCode', err.code);
							this.$set(this.equipList[inx], 'resultMessage', err.message);
							this.$emit('paramResult', this.equipList)
						});;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.param-content {
		padding: 0 20rpx 20rpx;

		.param-one {
			line-height: 92rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #E5E5E5;
			font-size: 28rpx;
			color: #333333;

			text {
				width: 240rpx;
				text-align: right;
				margin-right: 20rpx;
			}

			.sliders {
				width: calc(100% - 250rpx);
			}
		}

		.search_btns {
			text-align: right;
			margin: 20rpx 0;

			button {
				background-color: #51b7b9;
			}
		}
	}
</style>
